<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="基础语音服务系统">
    <meta name="description" content="基础语音服务系统">

    <link rel="stylesheet" href="./adminlte/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./common/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./common/css/style.css" >
    <link rel="stylesheet" href="./common/css/login.css" >

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

    <body class="gray-bg">
        <div class="middle-box text-center loginscreen  animated fadeInDown" style="padding-top:5px;">
            <div>
                <div>
                    <h1 class="logo-name" style="font-size: 75px;">语音基础服务系统</h1>
                </div>
                <h3>欢迎注册 语音基础服务系统</h3>
                <p>创建一个语音基础服务系统新账户</p>

                <form class="m-t" role="form" action="">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">手机号</span>
                            <input type="text" class="form-control" name="phone" required="true">
                            <span class="input-group-addon send" style="cursor:pointer;background:#727f8c;color:#fff;">点击发送</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">验证码</span>
                            <input type="text" class="form-control" placeholder="请输入验证码" name="code">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">密 &nbsp;&nbsp;码</span>
                            <input type="password" class="form-control" placeholder="请输入验证码" name="password" required="true">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary block full-width m-b register">注 册</button>
                    <p class="text-muted text-center">
                        <small>已经有账户了？</small>
                        <a href="index.html">点此登录</a>
                    </p>

                </form>
            </div>
        </div>

        <!-- 全局js -->
        <script type="text/javascript" src="./adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>
        <script type="text/javascript" src="./adminlte/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./common/js/common.js"></script>
        <script type="text/javascript" src="./common/js/ajax.js"></script>
        <script type="text/javascript" src="./common/js/form.js"></script>
        <script type="text/javascript" src="./common/js/base-modal.js"></script>
        <script>
            $(document).ready(function () {
                $(".register").click(function () {
                    $(".register").prop("disabled", true);
                    var blag = true;
                    $("[required='true']").each(function () {
                        if ($.trim($(this).val()) == "") {
                            modals.info($(this).attr("placeholder"));
                            blag = false;
                            $(".register").prop("disabled", false);
                            return false;
                        }
                    })
                    if (blag == false) {
                        $(".register").prop("disabled", false);
                        return;
                    }
                    var param = getFormData($("form"));
                    AsyncPost("/user/register", param, function (result) {
                        modals.correct("注册成功", function () {
                            window.location.href = "index.html";
                        });
                    },function (message) {
                        $(".register").prop("disabled", false);
                    })
                });
                $(".send").click(function send() {
                    if (!checkMobile($('form [name="phone"]').val())) {
                        modals.error("请输入正确的手机号");
                        return false;
                    }
                    AsyncPost("/user/send_code", {phone: $('form [name="phone"]').val()}, function (value) {
                        var time = 60;
                        var interval = setInterval(function () {
                            $(".send").text(time--);
                            if (time == 0) {
                                $(".send").text("点击发送");
                                $(".send").click(send);
                                clearInterval(interval);
                            } else {
                                $(".send").unbind("click");
                            }
                        }, 1000);
                    });
                });
            });
        </script>
    </body>
</html>